<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="main">
<video id="movie" width="320" height="240" preload controls>
<source src=" shiping.mp4" />
<source src=" http://diveintohtml5.info/i/pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src=" http://diveintohtml5.info/i/pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object width="320" height="240" type="application/x-shockwave-flash"data=" http://releases.flowplayer.org/swf/flowplayer-3.2.1.swfflowplayer-3.2.1.swf"> data="flowplayer-3.2.1.swf"> 
<param name="movie" value=" http://releases.flowplayer.org/
swf/flowplayer-3.2.1.swf" /> 
<param name="allowfullscreen" value="true" /> 
<param name="flashvars" value='config={"clip": 
{"url":http://diveintohtml5.info/i//test.mp4", "autoPlay":false, 
"autoBuffering":true}}' /> 
<p>Download video as <a href=" http://diveintohtml5.info/i/pr6.mp4">MP4</a>, <a href=" http://diveintohtml5.info/i/pr6.webm">WebM</a>, or 
<a href=" http://diveintohtml5.info/i/pr6.ogv">Ogg</a>.</p> 
</object>
</video>
<p>Try this page in Safari 4! Or you can <a href=" http://
diveintohtml5.info/i//test.mp4">download the video</a> instead.</p>
</div>
</body>
</html>